<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="65%" :title="`${drawerProps.title}专题`">
    <el-form
      ref="ruleFormRef"
      label-width="100px"
      label-suffix=" :"
      :rules="rules"
      :disabled="drawerProps.isView"
      :model="drawerProps.rowData"
      :hide-required-asterisk="drawerProps.isView"
    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="drawerProps.rowData.title" placeholder="专题标题" clearable></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input type="textarea" :rows="3" v-model="drawerProps.rowData.description" placeholder="专题描述" clearable />
      </el-form-item>
      <el-form-item label="来源" prop="origin" style="width: 30%;">
        <el-select v-model="drawerProps.rowData.origin" clearable>
          <el-option v-for="item in drawerProps.specialOrigins" :label="item.name" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="标签" prop="feature" style="width: 30%;">
        <el-select v-model="drawerProps.rowData.feature" clearable>
          <el-option v-for="item in drawerProps.specialFeatures" :label="item.name" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="主图" prop="pics">
        <UploadImg v-model:imageUrl="drawerProps.rowData.pics" width="80px" height="80px" :file-size="3">
          <template #empty>
            <el-icon><Plus /></el-icon>
            <span>请上传主图</span>
          </template>
          <template #tip> 图片大小不能超过 3M </template>
        </UploadImg>
      </el-form-item>
      <el-form-item label="格式" prop="content_type">
        <el-radio-group v-model="drawerProps.rowData.content_type" @change="handleChangeContentType">
          <el-radio :value="1">MarkDown</el-radio>
          <el-radio :value="2">富文本</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <MarkdownEditor v-if="drawerProps.rowData.content_type == 1"
                        @update:modelValue="handleUpdateModelValue"
                        :model-value="drawerProps.rowData.content"
                        :current-theme="drawerProps.theme"
                        :language="drawerProps.language"
                        :show-preview="drawerProps.isView" />
        <WangEditor v-else v-model="drawerProps.rowData.content" />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="drawerProps.rowData.sort" :min="0" placeholder="请输入排序" style="width:180px" clearable />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="drawerProps.rowData.status">
          <el-radio :value="1">启用</el-radio>
          <el-radio :value="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="drawerVisible = false"> 取消 </el-button>
      <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import UploadImg from "@/components/Upload/Img.vue";
import { Plus } from "@element-plus/icons-vue";
import { Recordable } from "@/interface/types.ts";
import MarkdownEditor from "@/components/Markdown/index.vue";
import WangEditor from "@/components/WangEditor/index.vue";
import {marked} from "marked";

const rules = reactive<Recordable>({
  title: [{ required: true, message: "请输入专题标题" }],
  pics: [{ required: true, message: "请上传专题主图" }],
  content_type: [{ required: true, message: "请选择专题内容格式" }],
  content: [{ required: true, message: "专题内容不能为空" }],
  status: [{ required: true, message: "专题状态不能为空" }],
});

interface DrawerProps {
  title: string;
  isView: boolean;
  specialOrigins: any[];
  specialFeatures: any[];
  rowData?: any;
  language: "zh_CN" | "en_US";
  theme: "classic" | "dark";
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const htmlContent = ref<string>("");
const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  theme: "classic",
  language: "zh_CN",
  specialOrigins: [],
  specialFeatures: [],
});

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  htmlContent.value = drawerProps.value.rowData.content && drawerProps.value.rowData.content_type == 1 ?
      marked(drawerProps.value.rowData.content) : drawerProps.value.rowData.content;
  drawerVisible.value = true;
};

const handleChangeContentType = () => {
  if (drawerProps.value.rowData.content_type == 2) {
    drawerProps.value.rowData.content = htmlContent.value;
  }
}

const handleUpdateModelValue = (value: string, html: string) => {
  drawerProps.value.rowData.content = value;
  htmlContent.value = html;
}

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      await drawerProps.value.api!(drawerProps.value.rowData);
      ElMessage.success({ message: `${drawerProps.value.title}专题成功！` });
      drawerProps.value.getTableList!();
      drawerVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

defineExpose({
  acceptParams
});
</script>
